import React, { useState } from 'react';
import { Layout } from 'antd';
import Header from './Header';
import Sidebar from './Sidebar';
import { Outlet } from 'react-router-dom';

const { Content } = Layout;

const AppLayout = () => {
  const [selectedMenu, setSelectedMenu] = useState(''); // 当前选中的一级菜单
  const [collapsed, setCollapsed] = useState(false); // 侧边栏折叠状态

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header
        selectedMenu={selectedMenu}
        setSelectedMenu={setSelectedMenu}
        collapsed={collapsed}
        setCollapsed={setCollapsed}
      />
      <Layout>
        <Sidebar selectedMenu={selectedMenu} collapsed={collapsed} />
        <Content style={{ margin: '16px' }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default AppLayout;
